<!-- props扩展字段组件 -->
<template>
  <a-form-item
    label="提示文字"
    v-if="props.showFieldList?.includes('placeholder')"
  >
    <a-input
      placeholder="输入文本占位符"
      v-model="copyProps.item.placeholder"
      @change="propsChange"
    />
  </a-form-item>
  <a-form-item label="最大字数" v-if="props.showFieldList?.includes('textMax')">
    <a-input-number
      placeholder="请输入文本最大字数"
      v-model="copyProps.item.textMax"
      :min="1"
      @change="propsChange"
    />
  </a-form-item>

  <a-form-item
    label="时期格式"
    v-if="props.showFieldList?.includes('dateFormat')"
  >
    <a-select
      placeholder="选择时间格式"
      v-model="copyProps.item.dateFormat"
      @change="propsChange"
    >
      <a-option value="YYYY-MM-DD HH:mm:ss" label="日期(24小时制)" />
      <a-option value="YYYY-MM-DD hh:mm:ss" label="日期(12小时制)" />
    </a-select>
  </a-form-item>

  <a-form-item
    label="是否显示时分秒"
    v-if="props.showFieldList?.includes('showTime')"
  >
    <a-radio-group v-model="copyProps.item.showTime" @change="propsChange">
      <a-radio :value="true">是</a-radio>
      <a-radio :value="false">否</a-radio>
    </a-radio-group>
  </a-form-item>

  <a-form-item
    label="最多限制可以选择几个"
    v-if="props.showFieldList?.includes('max')"
  >
    <a-input-number
      :min="1"
      placeholder="最多可以选择几个"
      v-model="copyProps.item.max"
      @change="propsChange"
    />
  </a-form-item>

  <a-form-item
    label="格式校验"
    v-if="props.showFieldList?.includes('validate')"
  >
    <a-select
      placeholder="选择校验类型"
      v-model="copyProps.item.validate"
      @change="propsChange"
    >
      <a-option value="bank" label="银行卡号" />
      <a-option value="phone" label="手机号码" />
      <a-option value="email" label="邮箱" />
      <a-option value="wxNumber" label="微信号码" />
    </a-select>
  </a-form-item>
  <!-- 复选选项设置 -->
  <a-form-item
    label="选项设置"
    v-if="props.showFieldList?.includes('checkOptions')"
  >
    <a-space class="option-set">
      <a-space direction="vertical">
        <!-- <a-input @change="propsChange" :style="{ width: '160px' }" placeholder="选项" allow-clear /> -->
        <a-input
          ref="checkInput"
          v-for="option in copyProps.item.options"
          :key="option.value"
          @change="propsChangeCheck"
          :style="{ width: '160px' }"
          v-model="option.label"
          :placeholder="option.label"
          allow-clear
        />
      </a-space>
      <a-space class="operate">
        <icon-plus class="plus" @click="addOption" />
        <icon-delete class="delete" @click="delOption" />
      </a-space>
    </a-space>
  </a-form-item>
  <!-- 下拉选择设置 -->
  <a-form-item
    label="选项设置"
    v-if="props.showFieldList?.includes('selectOptions')"
  >
    <a-space class="option-set">
      <a-space direction="vertical">
        <a-input
          ref="checkInput"
          v-for="option in copyProps.item.selectOptions"
          :key="option.value"
          @change="propsChangeSelectCheck"
          :style="{ width: '160px' }"
          v-model="option.label"
          :placeholder="option.label"
          allow-clear
        />
      </a-space>
      <a-space class="operate">
        <icon-plus class="plus" @click="addSelectOption" />
        <icon-delete class="delete" @click="delSelectOption" />
      </a-space>
    </a-space>
  </a-form-item>
  <!-- 单选选项设置 -->
  <a-form-item
    label="选项设置"
    v-if="props.showFieldList?.includes('radioOptions')"
  >
    <a-space class="option-set">
      <a-space direction="vertical">
        <a-input
          ref="checkInput"
          v-for="option in copyProps.item.radioOptions"
          :key="option.value"
          @change="propsChangeCheck"
          :style="{ width: '160px' }"
          v-model="option.label"
          :placeholder="option.label"
          allow-clear
        />
      </a-space>
      <a-space class="operate">
        <icon-plus class="plus" @click="addRadioOption" />
        <icon-delete class="delete" @click="delRadioOption" />
      </a-space>
    </a-space>
  </a-form-item>
</template>

<script setup lang="ts">
  import { reactive, watch, ref } from 'vue';
  import { cloneDeep } from 'lodash';

  const emit = defineEmits(['propsChange']);
  const props = defineProps<{
    props: any; //控件的props
    showFieldList?: string[]; //控件可以设置的字段名
    uuid: string; //控件的uuid
  }>();
  interface CopyPropsType {
    item: { [propName: string]: any };
  }
  const copyProps = reactive<CopyPropsType>({ item: {} }); //cope一份props
  watch(
    //监听uuid改变复制Props
    () => props.uuid,
    () => {
      copyProps.item = cloneDeep(props.props);
      // for (const key in props.props) {
      //   copyProps[key] = props.props[key];
      // }
    }
  );

  const propsChange = () => {
    emit('propsChange', copyProps.item);
  };
  const checkInput = ref();
  const propsChangeCheck = () => {
    emit('propsChange', copyProps.item);
  };
  // 添加复选框选项
  const addOption = () => {
    let value = copyProps.item.options.length + 1;
    // let obj = { value, label: `选项${value}` }
    let obj = { value, label: '' };
    copyProps.item.options.push(obj);
    emit('propsChange', copyProps.item);
  };
  const propsChangeSelectCheck = () => {
    emit('propsChange', copyProps.item);
  };
  // 删除复选框选项
  const delOption = () => {
    copyProps.item.options.pop();
    emit('propsChange', copyProps.item);
  };
  // 添加下拉选项
  const addSelectOption = () => {
    let value = copyProps.item.selectOptions.length + 1;
    // let obj = { value, label: `选项${value}` }
    let obj = { value, label: '' };
    copyProps.item.selectOptions.push(obj);
    emit('propsChange', copyProps.item);
  };
  // 删除复选框选项
  const delSelectOption = () => {
    copyProps.item.selectOptions.pop();
    emit('propsChange', copyProps.item);
  };
  // 添加下拉选项
  const addRadioOption = () => {
    let value = copyProps.item.radioOptions.length + 1;
    // let obj = { value, label: `选项${value}` }
    let obj = { value, label: '' };
    copyProps.item.radioOptions.push(obj);
    emit('propsChange', copyProps.item);
  };
  // 删除复选框选项
  const delRadioOption = () => {
    copyProps.item.radioOptions.pop();
    emit('propsChange', copyProps.item);
  };
</script>

<style lang="less" scoped>
  .option-set {
    display: flex;
    align-items: flex-end;

    .operate {
      padding-bottom: 5px;

      .plus {
        cursor: pointer;
      }

      .plus:hover {
        color: #165dff;
      }

      .delete {
        cursor: pointer;
      }

      .delete:hover {
        color: #165dff;
      }
    }
  }
</style>
